<template>
	<view class="index">
		<view class="index-bgcImg">
			<image src="../../static/common/myTop.png" mode=""></image>
		</view>
		<view class="index-top">
			<view class="index-top-icon">
				<view class="index-top-avatar">
					<image :src="beaeUrl+userInfo.avatar" mode=""></image>
				</view>
			</view>

			<view class="index-top-name">
				{{hospital_name}}
			</view>
			<view class="index-top-hospilal">
				<!-- <view class="">
					成都市武侯区人民南路三段14号
				</view> -->
			</view>
			<view class="index-top-order">
				<view class="index-top-order-item" v-for="(item,index) in order" :key="item.id">
					<view class="index-top-order-item-num">
						{{item.num}}
					</view>
					<view class="index-top-order-item-name">
						{{item.name}}
					</view>
				</view>
			</view>
		</view>
		<view class="index-order">
			<view class="select_box" v-if="isSelect">
				<view class="content-row">
					<view class="filter-row">医院查询</view>
					<view class="content-input" style="padding:20rpx 24rpx;">
						<input :value="hospital_name2" type="text" placeholder="医院名称" disabled @tap="getShowHospital(2)"
							placeholder-style="font-size: 28rpx; font-weight: 400; color: #C6C7CB;" />
						<image src="../../static/down.png" mode="" class="down" />
					</view>
				</view>
				<view class="content-row">
					<view class="filter-row">科室查询</view>
					<view class="content-input" style="padding: 20rpx 24rpx;">
						<input :value="department_name" type="text" placeholder="科室名称" disabled @tap="startRoom"
							placeholder-style="font-size: 28rpx; font-weight: 400; color: #C6C7CB;" />
						<image src="../../static/down.png" mode="" class="down" />
					</view>
				</view>
				<view class="content-row">
					<view class="filter-row">设备查询</view>
					<view class="content-input">
						<input v-model="queryParams.equipment_name" value="" type="text" placeholder="设备名称"
							placeholder-style="font-size: 28rpx; font-weight: 500; color: #C6C7CB;" />
					</view>
				</view>
				<view class="btn_select">
					<view class="submit_l" @tap="getClear">
						清空
					</view>
					<view class="submit_r" @tap="getSearch">
						确定
					</view>
				</view>
			</view>

			<view class="index-order-work">
				<view :class="['content-work-item',queryParams.type==item.id?'active':'']" v-for="(item,index) in work"
					:key='index' @tap="jumpWord(item.id)">
					{{item.title}}
					<image src="../../static/select_icon.png" mode=""
						:style="{visibility:isSelect&&item.id==2?'':'hidden'}" class="select_icon" />
				</view>
			</view>

			<view class="index-order-list " @tap="jumpDetail(item.id,item.user.nickname,item.warranty_id)"
				:key="item.id" v-for="(item,index) in orderList">
				<view class="detail-top">
					<view class="left-name">
						{{item.hospital.name||'-'}}
					</view>
				</view>
				<view class="product">
					<view class="dis">
						<view class="product-left-name">
							工单ID：<text class="product-name-border">{{item.workID||'-'}}</text>
						</view>
						<view class="product-left-name">
							暂停状态：<text class="product-name-border">{{item.open_data == 0 ? '暂停' : '开启'}}</text>
						</view>
					</view>
					<view class="dis">
						<view class="product-left-name">
							设备类别：<text class="product-name-border">{{item.equipment.pinpai.name||'-'}}</text>
						</view>
						<view class="product-left-name">
							品牌：<text class="product-name-border">{{item.equipment.leibie.name||'-'}}</text>
						</view>
					</view>
					<view class="dis">
						<view class="product-left-name">
							型号：<text class="product-name-border">{{item.equipment.xinghao.name||'-'}}</text>
						</view>
						<view class="product-left-name">
							序列号：<text class="product-name-border">{{item.equipment.serial||'-'}}</text>
						</view>
					</view>
					<view class="dis">
						<view class="product-left-name">
							设备生产年份：<text class="product-name-border">{{item.equipment.create_date||'-'}}</text>
						</view>
						<view class="product-left-name">
							使用年限：<text class="product-name-border">{{item.equipment.use_year||'-'}}</text>
						</view>
					</view>
					<view class="dis" v-if="queryParams.type == 1">
						<view class="product-left-name">
							维保次数：<text class="product-name-border">{{item.progress||'-'}}</text>
						</view>
						<view class="product-left-name">
							下次维保时间：<text class="product-name-border">{{item.next_time||'-'}}</text>
						</view>
					</view>
					<view class="dis">
						<view class="product-left-name">
							联系人：<text class="product-name-border">{{item.contacts||'-'}}</text>
						</view>
						<view class="product-left-name" style="display: flex;align-items: center;">
							<view class="" style="width: 38%;">联系电话：</view>
							<view class="" style="display: flex;align-items: center;" @tap="call(item.mobile)">
								<view class="" style="width: 16%;">
									<image v-if="item.mobile" src="@/static/phone.png" class="point_icon2" />
								</view>
								<view class="">
									<text style="color: #5180FF;"
										class="product-left-name-border">{{item.mobile||'-'}}</text>
								</view>
							</view>
						</view>
					</view>
					<view class="dis" v-if="queryParams.type != 1">
						<view class="product-left-name">
							成交价：<text class="product-name-border">￥{{item.final_price||'0'}}</text>
						</view>
					</view>
					<view class="product-left-name">
						预约时间：<text class="product-name-border">{{item.yuyue_time||'-'}}</text>
					</view>
					<view class="product-left-name" style="display: flex;" v-if="item.engineer.length>0">
						<view class="" v-for="(i,index) in item.engineer">
							{{index == 0?'当前指派：':""}}
							<text class="product-left-name-point"
								style="margin-right: 20rpx;">{{i.nickname||'-'}}</text>
						</view>
					</view>
					<view class="product-left-name" style="display: flex;" v-if="item.hxengineer.length>0">
						<view class="" v-for="(i,index) in item.hxengineer">
							{{index == 0?'当前指派：':""}}
							<text class="product-left-name-point"
								style="margin-right: 20rpx;">{{i.nickname||'-'}}</text>
						</view>
					</view>
				</view>
				<view class="order-time">
					<view class="order-time-left">
						<view>{{item.createtime}}</view>
						<view v-if="queryParams.type == 6" style="margin-top: 10rpx;">到期时间：{{item.warranty_time_text}}
						</view>
					</view>
					<view class="order-time-right" @tap="jumpDetail(item.id)">
						详情
					</view>
				</view>
			</view>
			<empty v-if="orderList.length==0"></empty>

		</view>
		<u-picker :show="showHospital" :columns="doctorList" keyName="label" @cancel="showHospital = false"
			@confirm="getDoctor"></u-picker>
		<u-picker :show="showRoom" :columns="roomList" keyName="label" @cancel="showRoom = false"
			@confirm="getRoom"></u-picker>
	</view>
</template>

<script>
	import base from '@/request/request.js'
	import empty from '../../components/empty.vue'
	import changetype from '../../utils/changetype.js'
	export default {
		components: {
			empty
		},
		data() {
			return {
				isSelect: false,
				hospital_name2: '',
				showHospital: false,
				showRoom: false,
				roomList: [],
				beaeUrl: base.imgUrl,
				work: [{
					id: 0,
					title: '报修工单'
				}, {
					id: 1,
					title: '维保工单'
				}, {
					id: 2,
					title: '筛选'
				}],
				hospital_name: "",
				hospitalName: '', //医院名称
				order: [{
					id: 0,
					name: '已报修',
					num: 56
				}, {
					id: 0,
					name: '进行中',
					num: 16
				}, {
					id: 0,
					name: '已完成',
					num: 105
				}],
				orderList: [], // status  0未读  1已读

				last_page: 1, //
				userInfo: {},
				background: ['color1', 'color2', 'color3'],
				duration: 1500,
				hospitalList: [],
				doctorList: [],
				queryParams: {
					department_id: '',
					equipment_name: '',
					hospital_id: '',
					type: 0,
					page: 1,
				},
				department_name: '',
				type: 1,
			}
		},
		onLoad() {
			this.getUserInfo()

		},
		onShareAppMessage() {
			return {
				title: '九健医疗设备系统',
				path: '/pages/index/index',
		
			}
		},
		onShow() {
			this.hospital_name = ''
			this.last_page = 1
			this.init()
			this.getIndexInfo()
			this.getHospital()
		},
		methods: {
			init() {
				this.orderList = []
				this.queryParams.page = 1
			},
			getClear() {
				this.queryParams.equipment_name = ''
				this.queryParams.hospital_id = ''
				this.queryParams.department_id = ''
				this.hospital_name2 = ''
				this.department_name = ''
				this.isSelect = false
				this.init()
				this.getIndexInfo()
			},
			getRoom(e) {
				this.queryParams.department_id = e.value[0].id
				this.department_name = e.value[0].label
				this.showRoom = false
			},
			getDepartment() {
				this.$https.post('/hospital/getDepartmentList', {
					hospital_id: this.queryParams.hospital_id
				}).then(res => {
					if (res.code == 1) {
						this.roomList.push(res.data.map(item => {
							return {
								label: item.name,
								id: item.id
							}
						}))
					}
				})
			},
			getDoctor(e) {
				this.showHospital = false
				this.queryParams.hospital_id = e.value[0].id
				this.hospital_name2 = e.value[0].label
				this.roomList = []
				this.department_name = ""
				this.queryParams.department_id = ''
				this.getDepartment()
			},
			startRoom() {
				if (this.queryParams.hospital_id == "" || this.hospital_name2 == "") {
					uni.showToast({
						title: '请先选择医院!',
						icon: 'none'
					})
					return
				}
				this.showRoom = true
			},
			getDoctorList() {
				this.$https.post('/hospital/getHospitalList').then(res => {
					if (res.code == 1) {
						this.doctorList.push(res.data.map(item => {
							return {
								label: item.name,
								id: item.id
							}
						}))
					}
				})
			},
			getSearch() {
				this.isSelect = false
				this.init()
				this.getIndexInfo()
			},
			getShowHospital(e) {
				this.type = e
				this.showHospital = true
				this.doctorList = []
				this.getDoctorList()
			},
			jumpWord(id) {
				if (id != 2) {
					this.queryParams.type = id
					this.init()
					this.getIndexInfo()
					this.isSelect = false
				} else {
					this.isSelect = !this.isSelect
				}
			},
			getHospital() {
				this.$https.post('/hospital/getHospitalList', this.queryParams).then(res => {
					if (res.code == 1) {
						this.hospitalList = res.data
						res.data.forEach((item, index) => {
							if (index < this.hospitalList.length - 1) {
								this.hospital_name += item.name + '，'
							} else {
								this.hospital_name += item.name
							}
						})
					}
				})
			},
			call(phone) {
				uni.makePhoneCall({
					phoneNumber: phone,
					success: function() {
						console.log('拨打电话成功');
					},
					fail() {
						console.log('打电话失败了');
					}
				})
			},
			/* 详情跳转 */
			jumpDetail(id) {
				wx.navigateTo({
					url: '/pages/detail/detail?id=' + id
				})
			},
			/* 数据 */
			getIndexInfo() {
				/* 首页统计数据 */
				this.$https.post('/hospital/getNum').then(res => {
					this.order[0].num = res.data.repair //已报修
					this.order[1].num = res.data.hand //进行中
					this.order[2].num = res.data.done //已完成
				})
				/* 列表 */
				this.$https.post('/hospital/engineerList', this.queryParams).then(res => {
					if (res.data.last_page > 0) {
						this.last_page = res.data.last_page
						if (res.data.data.length > 0) {
							this.orderList = this.orderList.concat(res.data.data)
						}
					}
				})

			},
			getUserInfo() {
				this.$https.post('/user/getUser').then(res => {
					this.userInfo = res.data.user
					this.hospitalName = res.data.name //医院名称
					uni.setStorageSync('hospital_id', res.data.id)
				})
			}
		},
		onReachBottom() {
			if (this.queryParams.page != this.last_page) {
				this.queryParams.page++
				this.getIndexInfo()
			}
		},
	}
</script>

<style lang="scss" scoped>
	.content-input {
		flex: 1;
		display: flex;
		font-size: 28rpx;
		align-items: center;
		height: 36rpx;
		background: #F5F6F8;
		border-radius: 44rpx;
		display: flex;
		padding: 20rpx 24rpx 20rpx 30rpx;
		display: flex;
		align-items: center;

		image {
			width: 46rpx;
			height: 44rpx;
			margin-right: 0;
		}

		input {
			flex: 1;
		}
	}

	.select_box {
		position: absolute;
		top: 2.1%;
		width: 84%;
		left: 4%;
		border-radius: 20rpx;
		box-shadow: 10rpx 10rpx 20rpx rgba(0, 0, 0, 0.1);
		background-color: #fff;
		padding: 0 30rpx 20rpx;
		z-index: 100;
	}

	.select_icon {
		width: 32rpx;
		height: 32rpx;
		margin-left: 8rpx;
	}

	.content-row {
		.filter-row {
			margin: 24rpx 16rpx 14rpx;
		}

		.down {
			width: 20rpx;
			height: 12rpx;
		}
	}

	.btn_select {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-top: 20rpx;

		.submit_r,
		.submit_l {
			width: 292rpx;
			height: 70rpx;
			border-radius: 70rpx;
			background-color: $public-oclor;
			line-height: 70rpx;
			text-align: center;
			color: #FFFFFF;
			margin: 20rpx auto;
		}

		.submit_l {
			background-color: #F5F6F8;
			color: #333333;
			margin-right: 20rpx;
		}
	}

	.product {
		border-top: 2rpx solid #f6f6fb;
		border-bottom: 2rpx solid #f6f6fb;
		padding-bottom: 20rpx;

		.dis {
			display: flex;
			align-items: center;
			justify-content: flex-start;

			view {
				width: 50%;
			}
		}

		&-left {
			flex: 1;
			padding-left: 10px;

			&-name {
				font-size: 25rpx;
				font-weight: 400;
				color: #969699;
				margin: 16rpx 0 0;

				text {
					color: #000000;
				}

				&-border {
					color: #303030;
					font-weight: 500;
				}
			}

			&-point {
				margin-right: 20rpx;
				color: #000;
			}
		}

		&-right {
			display: flex;
			flex-direction: column;
			justify-content: flex-end;
			width: 100px;

			.btn {
				height: 60rpx;
				line-height: 60rpx;
				padding: 0rpx 48rpx;
				background-color: #1aad19;
				color: #FFFFFF;
				font-size: 28rpx;
				border-radius: 52rpx;
				margin-bottom: 6px;
				border: 0;
			}

			.hiddenBtn {
				display: none;
			}
		}
	}

	.point_icon2 {
		width: 18rpx;
		height: 22rpx;
		margin-top: 8rpx;
	}

	.order-time {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 16rpx 0rpx;

		&-left {
			font-size: 24rpx;
			font-weight: 400;
			color: #646466;
		}

		&-right {
			padding: 12rpx 48rpx;
			background-color: $public-oclor;
			color: #FFFFFF;
			font-size: 28rpx;
			border-radius: 52rpx;
		}
	}

	.uni-margin-wrap {
		width: 680rpx;
		width: 100%;
	}

	.swiper {
		height: 60rpx;
	}

	.swiper-item {
		display: block;
		height: 60rpx;
		line-height: 60rpx;
		text-align: left;
		font-size: 36rpx;
	}

	.swiper-list {
		margin-top: 40rpx;
		margin-bottom: 0;
	}

	.uni-common-mt {
		margin-top: 60rpx;
		position: relative;
	}

	.info {
		position: absolute;
		right: 20rpx;
	}

	.uni-padding-wrap {
		width: 550rpx;
		padding: 0 100rpx;
	}

	.index {
		position: relative;

		&-order {
			min-height: 800rpx !important;
			padding: 16rpx 32rpx;
			position: relative;
			top: -54rpx;
			border-radius: 48rpx 48rpx 0px 0px;
			overflow: hidden;
			background-color: #F5F6F8;
			padding-bottom: 40rpx;

			.detail-top {
				display: flex;
				justify-content: space-between;
				padding: 26rpx 0 22rpx;
			}

			.left-name {
				font-size: 32rpx;
				font-weight: 600;
				color: #303030;
			}

			.right-name {
				font-size: 28rpx;
				font-weight: 500;
				color: #FFAB00;
				letter-spacing: 4rpx;
			}

			&-list {
				position: relative;
				padding: 0 26rpx;
				margin: 0rpx 0 30rpx;
				box-shadow: 10rpx 10rpx 20rpx rgba(0, 0, 0, 0.02);
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				background-color: #FFFFFF;
				border-radius: 16rpx;

				&-title {
					font-size: 28rpx;
					font-weight: 500;
					color: #000000;
					line-height: 33rpx;
				}

				&-msg {
					font-size: 28rpx;
					font-family: PingFang SC-Medium, PingFang SC;
					font-weight: 500;
					color: #666F80;
					line-height: 33rpx;
					white-space: nowrap;
					text-overflow: ellipsis;
					overflow: hidden;
				}

				&-sign {
					position: absolute;
					top: 52rpx;
					right: 20rpx;
					width: 12rpx;
					height: 12rpx;
					background-color: #FF3507;
					border-radius: 50%;
					z-index: 999999999999;
				}
			}


			&-work {
				display: flex;
				padding: 10rpx 0 36rpx;
				justify-content: space-around;

				&-item {
					text-align: center !important;
					width: 46%;
					font-size: 28rpx;
					font-weight: 400;
					color: #969699;
					line-height: 48rpx;
				}
			}

			.active {
				font-size: 36rpx;
				font-weight: 550;
				color: #141414;
				line-height: 48rpx;
				position: relative;
			}

			.active::before {
				content: '';
				width: 100rpx;
				height: 8rpx;
				border-radius: 8rpx;
				background-color: $public-oclor;
				position: absolute;
				bottom: -16rpx;
				left: 30%;
				margin-left: -30rpx;
			}

			.active::after {
				content: '';
				width: 8rpx;
				height: 8rpx;
				border-radius: 50%;
				background-color: $public-oclor;
				position: absolute;
				bottom: -16rpx;
				left: 28%;
				margin-left: -40rpx;
			}

			&-head {
				padding: 40rpx 32rpx 28rpx;
				background: linear-gradient(180deg, rgba(26, 102, 255, 0.3) 0%, rgba(245, 246, 248, 0) 100%);
				display: flex;
				justify-content: space-between;

				&-left {
					font-size: 28rpx;
					font-weight: 500;
					color: #000000;
					line-height: 33rpx;

					&-right {
						display: flex;
						align-items: center;
					}
				}

				&-right {
					&-a {
						font-size: 24rpx;
						font-weight: 500;
						color: #979797;
						line-height: 28rpx;
						letter-spacing: 8rpx;
					}

					&-icon {}
				}
			}
		}

		&-top {
			background-color: $public-oclor;
			padding: 170rpx 34rpx 78rpx;

			&-icon {
				display: flex;
				align-items: center;
				justify-content: flex-start;
			}

			&-avatar {
				width: 160rpx;
				height: 160rpx;
				border-radius: 50%;
				overflow: hidden;

				image {
					width: 100%;
					height: 100%;
				}
			}

			&-nick {
				color: #fff;
				margin-left: 30rpx;
				font-size: 32rpx;
			}

			&-name {
				margin: 22rpx 0 20rpx;
				font-weight: 600;
				color: #FFFFFF;
				font-size: 40rpx;
				overflow-x: scroll;
				overflow-y: hidden;
				white-space: nowrap;
				width: 100%;
			}

			&-hospilal {
				font-weight: 500;
				color: rgba(255, 255, 255, 0.7);
				line-height: 33rpx;
				font-size: 28rpx;
			}

			&-order {
				margin-top: 20rpx;
				height: 140rpx;
				background: rgba(255, 255, 255, 0.3);
				border-radius: 20rpx;
				display: flex;
				justify-content: center;
				justify-content: center;
				align-items: center;

				&-item:nth-child(2) {
					border-left: 2rpx solid rgba(255, 255, 255, 0.2);
					border-right: 2rpx solid rgba(255, 255, 255, 0.2);
				}

				&-item {
					display: flex;
					align-items: center;
					flex-direction: column;
					justify-content: center;
					flex: 1;
					height: 100%;

					&-name {
						font-size: 24rpx;
						font-weight: 500;
						color: rgba(255, 255, 255, 0.6);
						line-height: 32rpx;
						letter-spacing: 8rpx;
					}

					&-num {
						font-size: 48rpx;
						font-weight: 540;
						color: #FFFFFF;
					}
				}
			}
		}


		&-bgcImg {
			position: absolute;
			z-index: 99;
			top: 0px;
			right: 0px;
			width: 384rpx;
			height: 368rpx;

			image {
				width: 100%;
				height: 100%;
			}
		}
	}
</style>